<style>
    .customer-price {
        font-size: 12px;
        color: #F57123;
    }

    .customer-msg-cl {
        color: #99A9BF;
    }
</style>
<template>
    <ly-page>
        <ly-navi title="图文"></ly-navi>
        <ly-page-content>
            <el-divider content-position="left">小 small</el-divider>
            <ly-img-info size="small" src="/static/ly/imgs/test_img.png" title="藤之内">
            </ly-img-info>
            <ly-code-view>
                <pre v-pre>
<ly-img-info size="small" src="/static/ly/imgs/test_img.png" title="藤之内"></ly-img-info>
                </pre>
            </ly-code-view>
            <el-divider content-position="left">默认 normal</el-divider>
            <ly-img-info src="/static/ly/imgs/test_img.png" title="藤之内">
                <ly-info label="性别">男</ly-info>
            </ly-img-info>
            <ly-code-view>
                <pre v-pre>
 <ly-img-info src="/static/ly/imgs/test_img.png" title="藤之内">
    <ly-info label="性别">男</ly-info>
</ly-img-info>
                </pre>
            </ly-code-view>
            <el-divider content-position="left">中等 medium</el-divider>
            <ly-img-info size="medium" src="/static/ly/imgs/test_img.png" title="藤之内">
                <ly-info label="性别">男</ly-info>
                <ly-info label="手机">17625949862</ly-info>
            </ly-img-info>
            <ly-code-view>
                <pre v-pre>
<ly-img-info size="medium" src="/static/ly/imgs/test_img.png" title="藤之内">
    <ly-info label="性别">男</ly-info>
    <ly-info label="手机">17625949862</ly-info>
</ly-img-info>
                    </pre>
            </ly-code-view>
            <div style="margin-top: 20px; margin-bottom: 20px; color: #3793FF;">大号 big</div>
            <el-divider content-position="left">大号 big</el-divider>
            <ly-img-info style="width: 320px;" size="big" src="/static/ly/imgs/test_img.png"
                         title="盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送">
                <ly-info label="性别">男</ly-info>
                <ly-info label="生日">2019-11-08</ly-info>
            </ly-img-info>
            <ly-code-view>
                <pre v-pre>
<ly-img-info style="width: 320px;" size="big" src="/static/ly/imgs/test_img.png"
             title="盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送">
    <ly-info label="性别">男</ly-info>
    <ly-info label="生日">2019-11-08</ly-info>
</ly-img-info>
                    </pre>
            </ly-code-view>
            <div style="margin-top: 20px; margin-bottom: 20px; color: #3793FF;">标题加粗</div>
            <el-divider content-position="left">标题加粗</el-divider>
            <ly-img-info bold style="width: 320px;" size="big" src="/static/ly/imgs/test_img.png"
                         title="盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送">
                <ly-info label="性别">男</ly-info>
                <ly-info label="生日">2019-11-08</ly-info>
            </ly-img-info>
            <ly-code-view>
                <pre v-pre>
<ly-img-info bold style="width: 320px;" size="big" src="/static/ly/imgs/test_img.png"
             title="盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送">
    <ly-info label="性别">男</ly-info>
    <ly-info label="生日">2019-11-08</ly-info>
</ly-img-info>
                    </pre>
            </ly-code-view>
            <div style="margin-top: 20px; margin-bottom: 20px; color: #3793FF;">圆行图标</div>
            <el-divider content-position="left">圆行图标</el-divider>
            <ly-img-info src="/static/ly/imgs/test_img.png" title="藤之内" circle>
                <ly-info label="性别">男</ly-info>
            </ly-img-info>
            <ly-code-view>
                <pre v-pre>
<ly-img-info src="/static/ly/imgs/test_img.png" title="藤之内" circle>
    <ly-info label="性别">男</ly-info>
</ly-img-info>
                    </pre>
            </ly-code-view>

            <div style="margin-top: 20px; margin-bottom: 20px; color: #3793FF;">更多展示</div>
            <el-divider content-position="left">更多展示</el-divider>
            <ly-img-info style="width: 420px;" :img-width="140" size="big" src="/static/ly/imgs/test_img.png">
               <template v-slot:title>
                    <i  style="color: #FE707D; " class="el-icon-brush"></i>
                   <i  style="color: #FE707D; " class="el-icon-brush"></i>

                   可以自定义标题的
                   <i  style="color: #FE707D; " class="el-icon-brush"></i>
                   <i  style="color: #FE707D; " class="el-icon-brush"></i>
                </template>
                <ly-info label="性别">男</ly-info>
                <div style="margin-top: 3px;">
                    <ly-tag size="small" is-blod color="black">都友会员</ly-tag>
                    <ly-tag size="small" color="green">售卖中</ly-tag>
                    <ly-tag size="small" color="purple">限时抢购</ly-tag>
                    <ly-tag size="small" color="yellow">多人拼团</ly-tag>
                </div>
            </ly-img-info>
            <ly-code-view>
                <pre v-pre>
<ly-img-info style="width: 420px;" :img-width="140" size="big" src="/static/ly/imgs/test_img.png"
>
    <templ v-slot:title>
                    <i  style="color: #FE707D; " class="el-icon-brush"></i>
                   <i  style="color: #FE707D; " class="el-icon-brush"></i>

                   可以自定义标题的
                   <i  style="color: #FE707D; " class="el-icon-brush"></i>
                   <i  style="color: #FE707D; " class="el-icon-brush"></i>
    </templ>
    <ly-info label="性别">男</ly-info>
    <div style="margin-top: 3px;">
        <ly-tag size="small" is-blod color="black">都友会员</ly-tag>
        <ly-tag size="small" color="green">售卖中</ly-tag>
        <ly-tag size="small" color="purple">限时抢购</ly-tag>
        <ly-tag size="small" color="yellow">多人拼团</ly-tag>
    </div>
</ly-img-info>
                    </pre>
            </ly-code-view>
            <ly-img-info size="big" block style="width: 320px;" src="/static/ly/imgs/test_img.png"
                         title="盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送">
                <div class="customer-price"><span class="mr10">¥18.5</span> <span>会员价：¥99.00</span></div>
                <div class="customer-msg-cl">大小：大&nbsp;颜色：蓝色</div>
            </ly-img-info>
            <div v-mt>
                <ly-tag size="small" is-blod color="black">都友会员</ly-tag>
                <ly-tag size="small" color="green">售卖中</ly-tag>
                <ly-tag size="small" color="purple">限时抢购</ly-tag>
                <ly-tag size="small" color="yellow">多人拼团</ly-tag>
            </div>
            <ly-code-view>
                <pre v-pre>
<ly-img-info size="big" block style="width: 320px;" src="/static/ly/imgs/test_img.png"
             title="盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送盒马鲜生送新鲜到家最快十分钟送达盒马鲜生送新鲜到家最快十分钟送">
    <div class="customer-price"><span class="mr10">¥18.5</span> <span>会员价：¥99.00</span></div>
    <div class="customer-msg-cl">大小：大&nbsp;颜色：蓝色</div>
</ly-img-info>
<div v-mt>
    <ly-tag size="small" is-blod color="black">都友会员2 </ly-tag>
    <ly-tag size="small" color="green">售卖中</ly-tag>
    <ly-tag size="small" color="purple">限时抢购</ly-tag>
    <ly-tag size="small" color="yellow">多人拼团</ly-tag>
</div>
                    </pre>
            </ly-code-view>
            <ly-markdown>
              <pre v-pre>
## `ly-img-info`

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  title | 标题	 |string |-	|-	|
|  src| 图片地址	  |string |-	|-|
|  size | 大小	  |string|small,normal,medium,big	|normal|
|  circle | 圆形图片类型	 |boolean |-	|false	|
|  bold | 标题加粗	  |boolean |—	|false	|
|  imgWidth | 图片宽度(只有 size为 big 时生效)	  |int |-	|80|

#### slot

| 名称  |说明   |
| ------------ | ------------ |
|  default | 内容区	 |
|  title | 标题区	 |

                  </pre>
            </ly-markdown>


        </ly-page-content>

    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    count: 1235

                }
            },
            mounted: function () {
//
            },
            methods: {}
        }
    })
</script>